<template>
  <div id="app">
    <transition :name="routerTransition">
      <keep-alive include="Home">
        <router-view/>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      routerTransition: 'router-slide-left',
    }
  },
  watch: {
    $route (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.routerTransition = toDepth < fromDepth ? 'router-slide-right' : 'router-slide-left'
    },
  },
}
</script>

<style lang="stylus">
@import './assets/stylus/app.styl';
@import '../../assets/stylus/import.styl';

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  color: $textColor;
}
</style>
